<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传结果 - xx-ai 文件浏览器</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/file/}">
                    <i class="bi bi-folder2-open"></i>
                    xx-ai 文件浏览器
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/file/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/file/browse(path=${targetPath})}">
                        <i class="bi bi-folder"></i>
                        返回目录
                    </a>
                </div>
            </div>
        </nav>

        <!-- 上传结果概览 -->
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-8">
                <!-- 总体结果卡片 -->
                <div class="card mb-4" th:classappend="${allSuccess} ? 'border-success' : ${hasSuccessFiles ? 'border-warning' : 'border-danger'}">
                    <div class="card-header" th:classappend="${allSuccess} ? 'bg-success bg-opacity-10' : ${hasSuccessFiles ? 'bg-warning bg-opacity-10' : 'bg-danger bg-opacity-10'}">
                        <div class="row align-items-center">
                            <div class="col">
                                <h4 class="card-title mb-0">
                                    <i class="bi" th:classappend="${allSuccess} ? 'bi-check-circle-fill text-success' : ${hasSuccessFiles ? 'bi-exclamation-triangle-fill text-warning' : 'bi-x-circle-fill text-danger'}"></i>
                                    上传结果
                                </h4>
                            </div>
                            <div class="col-auto">
                                <span class="badge fs-6" th:classappend="${allSuccess} ? 'bg-success' : ${hasSuccessFiles ? 'bg-warning' : 'bg-danger'}"
                                      th:text="${allSuccess} ? '全部成功' : ${hasSuccessFiles ? '部分成功' : '全部失败'}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-3">
                                <div class="border-end">
                                    <h3 class="text-primary mb-1" th:text="${totalFiles ?: 0}">0</h3>
                                    <small class="text-muted">总文件数</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="border-end">
                                    <h3 class="text-success mb-1" th:text="${successCount ?: 0}">0</h3>
                                    <small class="text-muted">上传成功</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="border-end">
                                    <h3 class="text-danger mb-1" th:text="${failCount ?: 0}">0</h3>
                                    <small class="text-muted">上传失败</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h3 class="text-info mb-1" th:text="${successRate}">0%</h3>
                                <small class="text-muted">成功率</small>
                            </div>
                        </div>
                        
                        <!-- 进度条 -->
                        <div class="mt-3">
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" 
                                     th:style="${'width: ' + successRateWidth}" 
                                     th:title="${'成功: ' + successCount + ' 个文件'}"></div>
                                <div class="progress-bar bg-danger" 
                                     th:style="${'width: ' + failRateWidth}"
                                     th:title="${'失败: ' + failCount + ' 个文件'}"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 成功文件列表 -->
                <div th:if="${successFiles != null && !successFiles.empty}" class="card mb-4">
                    <div class="card-header bg-success bg-opacity-10">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-check-circle text-success"></i>
                            上传成功的文件 (<span th:text="${#lists.size(successFiles)}">0</span>)
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div th:each="file, fileStat : ${successFiles}" class="col-md-6 col-lg-4 mb-3">
                                <div class="border rounded p-3 h-100">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                                        <div class="flex-grow-1">
                                            <strong class="d-block text-truncate" th:text="${file.fileName}" title="文件名">filename.txt</strong>
                                            <small class="text-muted">
                                                大小: <span th:text="${file.fileSize != null ? #numbers.formatDecimal(file.fileSize/1024.0, 1, 1) + ' KB' : '未知'}">0 KB</span>
                                            </small>
                                            <br>
                                            <small class="text-muted">
                                                类型: <span th:text="${file.contentType ?: '未知'}">unknown</span>
                                            </small>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-success">
                                            <i class="bi bi-folder"></i>
                                            <span th:text="${file.filePath}" class="text-truncate d-inline-block" style="max-width: 200px;" title="文件路径">路径</span>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 失败文件列表 -->
                <div th:if="${failedFiles != null && !failedFiles.empty}" class="card mb-4">
                    <div class="card-header bg-danger bg-opacity-10">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-x-circle text-danger"></i>
                            上传失败的文件 (<span th:text="${#lists.size(failedFiles)}">0</span>)
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:each="file, fileStat : ${failedFiles}" class="border-start border-3 border-danger ps-3 mb-3">
                            <div class="d-flex align-items-start">
                                <i class="bi bi-x-circle-fill text-danger me-2 mt-1"></i>
                                <div class="flex-grow-1">
                                    <strong th:text="${file.fileName}">filename.txt</strong>
                                    <div class="text-danger mt-1">
                                        <i class="bi bi-exclamation-triangle"></i>
                                        <span th:text="${file.message}">错误信息</span>
                                    </div>
                                    <small class="text-muted">
                                        错误代码: <code th:text="${file.errorCode}">ERROR_CODE</code>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="card">
                    <div class="card-body text-center">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            <a th:href="@{/file/browse(path=${targetPath})}" class="btn btn-primary">
                                <i class="bi bi-folder"></i>
                                查看目标目录
                            </a>
                            <a th:href="@{/file/upload(path=${targetPath})}" class="btn btn-outline-primary">
                                <i class="bi bi-plus-circle"></i>
                                继续上传文件
                            </a>
                            <a th:href="@{/file/}" class="btn btn-outline-secondary">
                                <i class="bi bi-house"></i>
                                返回首页
                            </a>
                        </div>
                        
                        <!-- 重新上传失败文件 -->
                        <div th:if="${hasFailedFiles}" class="mt-3">
                            <button type="button" class="btn btn-outline-warning" onclick="showRetryInfo()">
                                <i class="bi bi-arrow-repeat"></i>
                                重新上传失败文件
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 重试提示模态框 -->
                <div class="modal fade" id="retryModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    <i class="bi bi-arrow-repeat"></i>
                                    重新上传失败文件
                                </h5>
                                <button type="button" class="btn-close" data-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <p>要重新上传失败的文件，您可以：</p>
                                <ol>
                                    <li>点击"继续上传文件"按钮</li>
                                    <li>重新选择失败的文件</li>
                                    <li>检查并修正可能的问题（文件大小、权限等）</li>
                                    <li>重新提交上传</li>
                                </ol>
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle"></i>
                                    <strong>提示：</strong>请根据错误信息检查文件是否符合上传要求，如文件大小限制、类型限制等。
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <a th:href="@{/file/upload(path=${targetPath})}" class="btn btn-primary">
                                    <i class="bi bi-upload"></i>
                                    前往上传页面
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
    <script>
        function showRetryInfo() {
            // Bootstrap 4 语法
            $('#retryModal').modal('show');
        }
        
        // 页面加载完成后自动隐藏成功消息（如果有的话）
        $(document).ready(function() {
            // 如果全部成功，3秒后自动跳转到目录
            const totalFiles = parseInt('[[${totalFiles}]]') || 0;
            const successCount = parseInt('[[${successCount}]]') || 0;
            
            if (totalFiles > 0 && totalFiles === successCount) {
                setTimeout(function() {
                    // 显示跳转提示
                    const toast = $('<div>').addClass('toast-container position-fixed top-0 end-0 p-3').html(`
                        <div class="toast show" role="alert">
                            <div class="toast-header">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                <strong class="me-auto">上传完成</strong>
                                <button type="button" class="btn-close" data-dismiss="toast"></button>
                            </div>
                            <div class="toast-body">
                                3秒后自动跳转到目标目录...
                            </div>
                        </div>
                    `);
                    $('body').append(toast);
                    
                    // 3秒后跳转
                    setTimeout(function() {
                        window.location.href = /*[[@{/file/browse(path=${targetPath})}]]*/ '/file/browse?path=' + encodeURIComponent('[[${targetPath}]]');
                    }, 3000);
                }, 2000);
            }
        });
    </script>
</body>
</html>